<template>
  <div class="board-item">
    <div class="vm inner">
      <div class="fc6 board-item__title mb5">
        {{ item.label }}
      </div>
      <count-up
        class="text-primary board-item__value"
        :end-val="(+item.value)"
        :decimal-places="decimalPlaces"
      />
      <span v-if="$slots.suffix||item.suffix">
        <slot name="suffix">{{ item.suffix }}</slot>
      </span>
      <!-- <span class="text-primary board-item__value">{{item.value}}</span> -->
    </div>
  </div>
</template>

<script>
// import { Component, Prop, Vue } from 'vue-property-decorator'
import CountUp from '@/components/CountUp/index.vue'
export default {
  components: { CountUp },
  props: {
    item: {
      type: [Object, Array]
    }
  },
  computed: {
    decimalPlaces () {
      const pointIndex = ('' + this.item.value).indexOf('.')
      return pointIndex !== -1 ? this.item.value.length - pointIndex - 1 : 0
    }
  }
}

</script>
<style lang="scss">
@import "~styles/variables";
.board-item {
  height: rem(128 * 1.25px);
  line-height: rem(128 * 1.25px);
  width: 100%;
  text-align: center;
  background: #f7f7f7;
  transition: transform 0.3s;
  &.bc-f {
    background: #fff;
    border: 1px dashed $border-color-normal;
    &:hover {
      cursor: pointer;
    }
  }
  &:hover {
    transform: scale(1.05) translateY(-5%);
    box-shadow: 0 0 5px 1px lighten(#409eff, 25%);
  }
  .inner {
    line-height: 1.5;
  }
  &__title {
    font-size: rem(16 * 1.25px);
  }
  &__value {
    font-size: rem(24 * 1.25px);
  }
}
</style>
